<script setup>
import axios from 'axios';
import { onMounted, nextTick, ref, reactive, watch, toRefs, watchEffect } from 'vue'
import circle_white from '@/assets/img/circle_white.png'
import circle_blue from '@/assets/img/circle_blue.png'
const url = import.meta.env.VITE_backurl_jxh
const props = defineProps({
  // tableData: {
  //   type: Array,
  //   default: [[], []]
  // },
  // listIdx: {
  //   type: Number,
  //   default: -1
  // }
})

const tableData = ref([]),
  yearIdx = ref(''),
  activeSty = reactive({
    color: '#1296db',
    borderBottom: '2px solid #1296db'
  })

const changeYear = (value) => {
  yearIdx.value = value
}
onMounted(() => {
  // 将时间戳转为月日时
  axios({
    method: 'get',
    url: url + '/jxhyb/sequence/surgeList',
  }).then(res => {
    tableData.value = res.data.data

    for (let key in tableData.value) {
      for (let key2 in tableData.value[key]) {
        tableData.value[key][key2].forEach(item => {
          item.id = getUid()
        })
      }
    }
    yearIdx.value = Object.keys(tableData.value)[0]
  })
})

const currentItemIdx = ref('')
const emit = defineEmits(['selectItem'])
const selectItem = (row) => {
  if (row.date == '') return
  if (currentItemIdx.value == row.id) {
    emit('selectItem', null, [], [])
    currentItemIdx.value = ''
    return
  }
  currentItemIdx.value = row.id
  let startDate = yearIdx.value + '年' + formatDate(row.startDate)
  let endDate = yearIdx.value + '年' + formatDate(row.endDate)
  let allSteps = []
  let allPngs = []
  // 一小时为间隔，算出包含的所有时间
  for (let i = Number(row.startDate); i <= Number(row.endDate); i += 3600000) {
    allSteps.push({ time: yearIdx.value + '年' + formatDate(i) })
    // allPngs里添加2018070801这种类型的时间
    allPngs.push({ time: yearIdx.value + formatDate(i).replace('月', '').replace('日', '').replace('时', '') })
  }
  emit('selectItem', row, allSteps, allPngs)
}


const getUid = () => {
  return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) {
    var r = Math.random() * 16 | 0,
      v = c == 'x' ? r : (r & 0x3 | 0x8);
    return v.toString(16);
  });
}

// 将时间戳转为月日时
const formatDate = (numb, format) => {
  const time = new Date(+numb);
  const year = time.getFullYear();
  const month = time.getMonth() + 1;
  const date = time.getDate();
  const hour = time.getHours();
  const minute = time.getMinutes();
  return `${month < 10 ? "0" + month : month}月${date < 10 ? "0" + date : date}日${hour < 10 ? "0" + hour : hour}时`
}

</script>
<template>
  <div class="ListCard">
    <div id="list_header">
      <div v-for="(item, key) in tableData" :style="yearIdx == key ? activeSty : ''" @click="changeYear(key)">
        {{ key }}
      </div>
    </div>
    <el-scrollbar id="list_content">
      <div v-for="(item, key) in tableData[yearIdx]">
        <div class="content_header">
          <span> {{ key == 'list' ? '风暴增水' : '最大增水' }}
          </span>
        </div>
        <div class="content_main">
          <el-table :data="item" style="width: 100%;" @cell-click="selectItem">
            <el-table-column prop="name" label="名称">
              <template #default="{ row }">
                <img :src="currentItemIdx == row.id ? circle_blue : circle_white" alt="">
                <span :style="{ color: currentItemIdx == row.id ? '#1296db' : '' }">{{ row.name }}</span>
              </template>
            </el-table-column>
            <el-table-column prop="startDate" label="起止时间" width="140">
              <template #default="{ row }">
                <span v-if="row.startDate && row.endDate">
                  {{ formatDate(row.startDate) }} ~
                  <br />
                  {{ formatDate(row.endDate) }}
                </span>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
    </el-scrollbar>
  </div>
</template>

<style lang='less' scoped>
.ListCard {
  position: absolute;
  background-color: var(--card-bg-color);
  height: 70vh;
  width: 25vw;
  z-index: 999;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 2px 4px rgba(0, 0, 0, .3);
  border: 1px solid rgba(235, 235, 235, .38);
  user-select: none;

  #list_header {
    height: 45px;
    width: 100%;
    background-color: var(--card-header-bg-color);
    border-bottom: 1px solid rgba(96, 90, 90, 0.38);
    display: flex;
    align-items: center;
    font-size: 18px;
    font-family: '钉钉进步体';
    justify-content: space-around;
    cursor: pointer;
  }

  #list_content {
    height: calc(100% - 45px);
    width: 100%;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 10px;

    .content_header {
      height: 30px;
      width: 100%;
      display: flex;
      align-items: center;
      font-size: 16px;
      font-family: '钉钉进步体';
      justify-content: space-around;
      cursor: pointer;
    }

    :deep(.el-table--fit) {
      height: calc(100% - 20px);
    }

    :deep(.el-table__row) {
      cursor: pointer;

      &.current-row {
        td {
          background-color: antiquewhite;
        }
      }
    }

    img {
      height: 15px;
      width: 15px;
      border: 1px solid #b1aeae;
      border-radius: 50%;
      margin-right: 10px;
    }


    // :deep(.current-row){
    //   td{
    //     background-color: rgb(135, 190, 172);
    //   }
    // }
  }
}
</style>